<template>
	<section class="content-box">
		<el-col class="toolbar">
			<el-col :span="12">
				<h2>资金预算执行表</h2>
			</el-col>
		</el-col>
		<el-col class='toolbar'>
			<el-col :span="24">
				 <span>年份：</span>
                <el-select v-model="BirthYear"  filterable placeholder="请选择">
                    <el-option v-for="item in year" :key="item.Code" :label="item.Name" :value="item.Code"></el-option>
                </el-select>
				<span>显示格式：</span>
                <el-select v-model="budgeType" @change="hmBox" filterable placeholder="请选择">
                    <el-option v-for="item in  budgetaryType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-button type="primary" @click="lzAtain">确定</el-button>
			</el-col>
		</el-col>
		<!--列表-->
		<el-table :data="tableData" border style="overflow-x:auto;" max-height="750">
			<el-table-column fixed prop="CashFlowItemName" label="现金流量科目" width="300" show-overflow-tooltip>
			</el-table-column>
			<el-table-column fixed prop="BudgetItemName" label="预算科目" width="300" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="1月累计" header-align="center">
				<el-table-column prop="Month1_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month1_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month1_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month1_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="2月累计" header-align="center">
				<el-table-column prop="Month2_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month2_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month2_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month2_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="3月累计" header-align="center">
				<el-table-column prop="Month3_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month3_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month3_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month3_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="4月累计" header-align="center">
				<el-table-column prop="Month4_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month4_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month4_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month4_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="5月累计" header-align="center">
				<el-table-column prop="Month5_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month5_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month5_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month5_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="6月累计" header-align="center">
				<el-table-column prop="Month6_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month6_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month6_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month6_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="7月累计" header-align="center">
				<el-table-column prop="Month7_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month7_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month7_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month7_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="8月累计" header-align="center">
				<el-table-column prop="Month8_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month8_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month8_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month8_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="9月累计" header-align="center">
				<el-table-column prop="Month9_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month9_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month9_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month9_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="10累计" header-align="center">
				<el-table-column prop="Month10_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month10_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month10_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month10_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="11月累计" header-align="center">
				<el-table-column prop="Month11_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month11_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month11_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month11_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="12月累计" header-align="center">
				<el-table-column prop="Month12_p" label="年初预算" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month12_c" label="预算执行" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month12_s" label="执行差异" width="120" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month12_r" label="执行率" width="120" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
		</el-table>
	</section>
</template>

<script>
	import axios from '../../util/axios';
	export default {
		name: 'zizhi',
		data() {
			return {
				BirthYear:'',
	            year:[],
	          	tableData:[],
		        budgetaryType: [{
			          value: '0',
			          label: '汇总'
			        }, {
			          value: '1',
			          label: '明细'
			        }
		       	],
		       	budgeType:'0', //显示格式
			}
		},
		methods: {
			GetYearList(){
				axios.post('GetYearList')
				.then(res => {
        				console.log(res)
        				this.year = res
        				this.BirthYear = res[res.length-1].Code
        				this.ListJson();
        			})
				.catch(err => {
        				console.log(err)
        			})
			},
			
			lzAtain() { //确定按钮
        			console.log(this.BirthYear, this.budgeType)
        			this.ListJson();
        		},
        	//请求列表数据
    		ListJson() {
    			axios.post('ListJson', {
    				year: this.BirthYear,
    				level: this.budgeType
    			})
    			.then(res => {
    				this.tableData = res
    				console.table(this.tableData)
    			})
    			.catch(err => {
    				console.log(err)
    			})
    		},
    		hmBox() {
    			console.log(this.budgeType)
  				this.ListJson();
    		},
    		dealF(e,cell,cellValue) {
					console.log("1111111",cellValue)
					if(cellValue == 0){
						return ''
					}else{
						return cellValue
					}	   
				},

		},
		created() {
			this.GetYearList();		
		},
		mounted() {

		},
	}
</script>
<style scoped lang="scss">
	@import '../../common/css/index.css';
	.toolbar {
		h2 {
			font-weight: 100;
			margin: 0 auto;
		}
	}
	
	;
</style>